import { useState } from 'react';

import Ham from '@/assets/images/shared/icon-ham.svg';
import Milk from '@/assets/images/shared/icon-milk.svg';
import Minus from '@/pagesComponents/Main/images/icon-minus.svg';
import Plus from '@/pagesComponents/Main/images/icon-plus.svg';
import { Button } from '@/shared/ui';
import cn from 'classnames';
import Image from 'next/image';

import { ColouredInfoBlock } from '../ColouredInfoBlock';
import cs from './Scheme.module.scss';

export const Scheme = () => {
  const [isFirst, setIsFirst] = useState(true);

  return (
    <ColouredInfoBlock className={cs.block} reverseResponsive>
      <h2 className="h2">Схема прикорма</h2>
      <p className={cn('p', cs.descr)}>Изучайте и настраивайте готовую схему прикорма, как вам удобно</p>
      <div>
        <Button
          className={cn(cs.accordeon, { [cs.active]: isFirst })}
          data-testid="button-toggle_open"
          onClick={() => setIsFirst(!isFirst)}
        >
          <div className={cs.flex}>
            <div className={cs.header}>
              <Image alt="Kefir" height={50} src={Milk} width={30} />
              <div className={cs.headerText}>
                <span>Кефир</span>
                <span>7-10 марта</span>
              </div>
            </div>
            <Image alt="icon" className={cs.icon} height={32} src={isFirst ? Minus : Plus} width={32} />
          </div>
          <div className={cs.content}>
            <div className={cn(cs.item, cs.grey)}>
              <span>7 марта</span>
              <span>3 г</span>
            </div>
            <div className={cn(cs.item, cs.blue)}>
              <span>8 марта</span>
              <span>10 г</span>
            </div>
            <div className={cs.item}>
              <span>9 марта</span>
              <span>20 г</span>
            </div>
            <div className={cs.item}>
              <span>10 марта</span>
              <span>40 г</span>
            </div>
          </div>
        </Button>
        <div className={cn(cs.accordeon, { [cs.active]: !isFirst })} onClick={() => setIsFirst(!isFirst)}>
          <div className={cs.flex}>
            <div className={cs.header}>
              <Image alt="Ham" height={45} src={Ham} width={48} />
              <div className={cs.headerText}>
                <span>Мясо кролика</span>
                <span>11–14 марта</span>
              </div>
            </div>
            <Image alt="icon" className={cs.icon} height={48} src={!isFirst ? Minus : Plus} width={48} />
          </div>
          <div className={cs.content}>
            <div className={cs.item}>
              <span>11 марта</span>
              <span>3 г</span>
            </div>
            <div className={cs.item}>
              <span>12 марта</span>
              <span>10 г</span>
            </div>
            <div className={cs.item}>
              <span>13 марта</span>
              <span>20 г</span>
            </div>
            <div className={cs.item}>
              <span>14 марта</span>
              <span>40 г</span>
            </div>
          </div>
        </div>
      </div>
    </ColouredInfoBlock>
  );
};
